<template>
  <view
    class="reader__title"
    :style="{
      color: themeConfig.muluSubTextColor,
      backgroundColor: themeConfig.pageBackground
    }"
  >
    <!-- 章节信息 -->
    <view class="reader__title-text reader__title-left">
      {{ chapterInfo }}
    </view>
    <!-- 进度信息 -->
    <view class="reader__title-text reader__title-center">
      {{ extraText || '' }}
    </view>
    <!-- 会员信息 -->
    <view class="reader__title-text reader__title-right">
      {{ member.name || '体验用户' }}
    </view>
  </view>
</template>

<script>
import { mapState, mapGetters } from "vuex";

export default {
  props: {
    extraText: String,
  },

  computed: {
    ...mapGetters(["themeConfig"]),
    ...mapState({
      chapterInfo: state => state.reader.chapterInfo,
      member: state => state.app.baseInfo.member || {},

    })
  }
};
</script>

<style lang="scss">
.reader__title {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 12px;
  padding: 0 32rpx;
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;

  &-text {
    width: 33.3%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  &-left {
    text-align: left;
  }

  &-center {
    text-align: center;
  }

  &-right {
    text-align: right;
  }
}
</style>
